<template>
	<view class="content">
		<!-- tab -->
		<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
			<view class="order-nav">
				<view class="nav-item" v-for="(nav, index) in orderState" :key="index" @tap="onNav(index, nav.id)">
					<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.title }}</view>
					<view class="nav-line" :class="{ 'line-active': tabindex === index }"></view>
				</view>
			</view>
		</scroll-view>
		<mescroll-body ref="mescrollRef" height="1050" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="prize-box">
			<view class="prize-item" v-for="(item, index) in resultList" :key="index">
				<view class="order-sn-box">
					<view class="order-sn">订单号：{{item.order_sn}}</view>
					<view class="order-status">{{item.status_name}}</view>
				</view>
				<view class="order-info" v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex">
					<view class="order-left">
						<view class="order-image">
							<image :src="goodsItem.thumb"></image>
						</view>
						<view class="order-name text-line2">{{goodsItem.title}}</view>
					</view>
					<view class="price-box">¥{{goodsItem.goods_price}}</view>
				</view>
				<view class="btn-box" >
					<view  v-show="item.status_name === '待收货' " class="btn-item confirm-shouhuo" @click="confirmExpress(item.id)">确认收货</view>
					<view v-show="item.status_name === '待收货' || item.status_name === '交易完成'" class="btn-item cat-express" @click="$Router.push({path: '/pages/prefile/express-list/express-list', query: {id: item.id}})">查看物流</view>
				</view>
			</view>

			<!-- <view class="prize-item">
				<view class="order-sn-box">
					<view class="order-sn">订单号：sn1453363666670</view>
					<view class="order-status">待发货</view>
				</view>
				<view class="order-info">
					<view class="order-left">
						<view class="order-image">
							<image src="../../../static/images/prefile/jianping.png"></image>
						</view>
						<view class="order-name">华为智能手机华为智能手机华为 智能手机</view>
					</view>
					<view class="price-box">¥199.00</view>
				</view>
				<view class="btn-box">
					<view class="btn-item confirm-shouhuo">确认收货</view>
					<view class="btn-item cat-express">查看物流</view>
				</view>
			</view> -->
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabindex: 0,
				orderState: [{
						id: 0,
						title: '待发货',
					},
					{
						id: 1,
						title: '待收货',
					},
					{
						id: 2,
						title: '已完成',
					},
				],
				resultList: [],
			};
		},
		methods: {
			confirmExpress(id){
				this.$http.get('index.confirmEexpress', {order_id: id}).then(res => {
					this.downCallback();
				})
			},
			onNav(index, id) {
				if (this.tabindex !== index) {
					this.tabindex = index;
					this.downCallback();
				}
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )

			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pages = page.num;
				if (this.tabindex === 0) {
					this.$http.get('index.myJianping.daifahuo', {
						page: pages
					}).then(res => {
						
						let curPageData = res.data.data;
						let curPageLen = curPageData.length;
						let totalCount = res.data.total;
						if (page.num == 1) this.resultList = []; //如果是第一页需手动置空列表
						this.resultList = this.resultList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, totalCount);
					})
				} else if (this.tabindex === 1) {
					this.$http.get('index.myJianping.daishouhuo', {
						page: pages
					}).then(res => {
						let curPageData = res.data.data;
						let curPageLen = curPageData.length;
						let totalCount = res.data.total;
						if (page.num == 1) this.resultList = []; //如果是第一页需手动置空列表
						this.resultList = this.resultList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, totalCount);
					})
				} else {
					this.$http.get('index.myJianping.yiwancheng', {
						page: pages
					}).then(res => {
						let curPageData = res.data.data;
						let curPageLen = curPageData.length;
						let totalCount = res.data.total;
						if (page.num == 1) this.resultList = []; //如果是第一页需手动置空列表
						this.resultList = this.resultList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, totalCount);
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './my-prize.scss';
</style>
